基本折线图是折线图的一种,能通过多系列数据配置的方式,展示同一类目下不同数据的变化,能够以折线和区域相结合的方式,智能地展示多维的数据变化趋势。本文档为您介绍基本折线图各配置项的含义,帮助您快速准确地使用基本折线图组件。
基础设置
width:组件在编辑器中的宽度
height:组件在编辑器中的高度
top:组件与编辑器顶部的距离
left:组件与编辑器左侧的距离
画布间距
顶间距:该图表与组件边界顶部的距离,单位为px
右间距:该图表与组件边界右侧的距离,单位为px
底间距:该图表与组件边界底部的距离,单位为px
左间距:该图表与组件边界左侧的距离,单位为px
标题
显示/隐藏:是否展示该图表的标题
标题名称:该图表的标题的名称
左边距:标题离容器左侧的距离
上边距:标题离容器上侧的距离
文本样式
字号:标题的字体大小
颜色:标题的颜色,支持hex、rgb以及rgba格式的色值
字体:标题的字体
字体粗细:标题字体的粗细
提示框
图例
显示/隐藏:是否展示该表图的图例
左间距:图例与容器左侧的距离
顶间距:图例与容器上侧的距离
排列方向:图例的排列方向,可选择水平 or 垂直进行展示
图例图标:图例的图标,可选圆形、方形、三角形、菱形图标进行展示
文本样式
字号:图例的字体大小
颜色:图例的颜色,支持hex、rgb以及rgba格式的色值
字体:图例的字体
字体粗细:图例的字体粗细
X轴
显示/隐藏:是否展示该图表的x轴
两端留白:控制数据起点是否从零刻度开始,建议使用两端留白,比较美观
坐标轴名称
x轴名称:x轴的名称
x轴名称位置:x轴的名称位置,可选起点处、居中、终点处
轴线间距:x轴的名称与轴线的距离
样式
颜色:坐标轴名称的颜色,支持hex、rgb以及rgba格式的色值
字体大小:坐标轴名称的字体大小
字体粗细:坐标轴名称的字体粗细
字体:坐标轴名称的字体
轴线
显示/隐藏:是否展示x轴的轴线
轴线样式
颜色:轴线的颜色,支持hex、rgb以及rgba格式的色值
样式:轴线可选实线 or 虚线进行展示
宽度:控制轴线的粗细,单位px
刻度值
显示/隐藏:是否展示x轴的刻度值
字号:刻度值的字体大小
颜色:刻度值的颜色,支持hex、rgb以及rgba格式的色值
字体:刻度值的字体
字体粗细:刻度值字体的粗细
刻度线
网格线
显示/隐藏:是否展示图表区域中的网格线
网格线样式
颜色:网格线的颜色,支持hex、rgb以及rgba格式的色值
样式:网格线的样式,可选实线、虚线、点进行展示
线宽:网格线的线宽,单位px
Y轴
y轴的配置与x轴基本类似,具体配置应用可参照x轴
显示/隐藏:是否展示该图表的y轴
坐标轴名称
y轴名称:y轴的名称
y轴名称位置:y轴的名称位置,可选起点处、居中、终点处
轴线间距:y轴的名称与轴线的距离
样式
颜色:坐标轴名称的颜色,支持hex、rgb以及rgba格式的色值
字体大小:坐标轴名称的字体大小
字体粗细:坐标轴名称的字体粗细
字体:坐标轴名称的字体
轴线
显示/隐藏:是否展示y轴的轴线
轴线样式
颜色:轴线的颜色,支持hex、rgb以及rgba格式的色值
样式:轴线可选实线 or 虚线进行展示
宽度:控制轴线的粗细,单位px
刻度值
显示/隐藏:是否展示y轴的刻度值
字号:刻度值的字体大小
颜色:刻度值的颜色,支持hex、rgb以及rgba格式的色值
字体:刻度值的字体
字体粗细:刻度值字体的粗细
刻度线
显示/隐藏:是否展示x轴上的刻度线
向内朝向:控制刻度线的朝向
网格线
显示/隐藏:是否展示图表区域中的网格线(按照x轴的刻度进行划分)
网格线样式
颜色:网格线的颜色,支持hex、rgb以及rgba格式的色值
样式:网格线的样式,可选实线、虚线、点进行展示
线宽:网格线的线宽,单位px
数据系列
该配置项为一个数组,可配置多个系列,编辑器将遍历数据,使数据通过一个或多个系列配置循环渲染。若需要自定义某些数据为特定样式则需要手动对数据进行排序
return [{
"x": "1月",
"y1": 215,
"y2": 245
}, ......]
x:类目轴字段
y:数据轴自定义字段,需要与每个序列配置项中的列字段名一致